<template>
  <div>
    <el-card>
      <el-page-header content="缴费业主列表" icon="" title="缴费记录管理">

        <div class="container">
          <div class="news-header" :style="{}"></div>
          <div class="search">
            <el-popover
              placement="bottom"
              title="检索结果"
              width="50%"
              :visible="visible"
            >
              <template #reference>
                <!-- <el-button class="m-2">aaaaaa</el-button> -->
                <el-input
                  v-model="searchText"
                  class="w-50 m-2"
                  placeholder="请输入名字查找"
                  :prefix-icon="Search"
                  type="search"
                  size="large"
                  @input="visible = true"
                  @blur="visible = false"
                />
              </template>

              <div v-if="searchnewslist.length">
                <div v-for="data in searchnewslist" :key="data._id" class="search-item">
                  {{ data.propname }}
                </div>
              </div>
              <div v-else>
                <el-empty description="暂无信息" :image-size="50" />
              </div>
            </el-popover>
          </div>
        </div>
      </el-page-header>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="propname" label="名字" width="180" />
        <el-table-column prop="propnumber" label="电话" width="180" />
        <el-table-column prop="propemail" label="邮箱" width="180" />
        <el-table-column prop="building" label="楼号" />
        <el-table-column prop="roomnumber" label="房号" />
        <el-table-column prop="tmoney" label="总金额" />
        <!-- <el-table-column prop="editTime" label="收费时间" width="180" /> -->
        <el-table-column label="收费时间" width="180">
          <template #default="scope">
            {{ formatTime.gettime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="ispay" label="是否缴费" width="180" /> -->

        <el-table-column label="是否缴费">
          <template #default="scope">
            <el-tag v-if="scope.row.ispay === 0" class="ml-2" type="danger"
              >未缴费</el-tag
            >
            <el-tag v-else class="ml-2" type="success">以缴费</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
// import {Search} from `@element-plus/icons-vue`
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, computed,reactive  } from "vue";
import formatTime from "@/util/formatTime.js";
import axios from "axios";
const searchText = ref("");
const visible = ref(false);
const newlist = ref([]);
onMounted(async () => {
  var res = await axios.get("/adminapi/rate/slist");
  newlist.value = res.data.data;
});
const searchnewslist = computed(() =>
  newlist.value.filter((item) => item.propname.includes(searchText.value))
);



  const tableData = ref([]);

  onMounted(() => {
    getTableData();
  });
  
  const getTableData = async () => {
    const res = await axios.get("/adminapi/rate/list3");
    // console.log(res.data)
    tableData.value = res.data.data;
    
  };
</script>

<style scoped lang="scss">
.container {
  position: relative;
}
.news-header {
  width: 100%;
  height: 100px;
  background-size: cover;
}
.search {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  .el-input {
    width: 50%;
  }
}

.search-item {
  height: 50px;
  line-height: 50px;
  &:hover {
    background: whitesmoke;
    color: red;
  }
}
</style>
